import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Menu, Dropdown, Button, Icon, message, Pagination, Input } from 'antd';

import { LogoHeader } from '../../../components/Header';
import SearchBox from '../components/SearchBox';
import styles from './index.module.less';

export default class SearchNews extends Component {
  state = {
    newList: [
      {
        key: 1,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
      {
        key: 2,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: '',
      },
      {
        key: 3,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
      {
        key: 4,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: '',
      },
      {
        key: 5,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
      {
        key: 6,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: '',
      },
      {
        key: 7,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: '',
      },
      {
        key: 8,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
      {
        key: 9,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
    ],
  };
  onSearch = value => {
    this.props.history.push({ path: '/search-news', query: { key: value } });
  };
  onChange = pageNumber => {
    console.log('Page: ', pageNumber);
  };

  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
  };
  render() {
    const extra = (
      <React.Fragment>
        <button className={styles.publishPriceBtn}>发布询价单</button>
        <button className={styles.publishGoodsBtn}>发布商品</button>
      </React.Fragment>
    );
    const menu = (
      <Menu onClick={handleMenuClick}>
        <Menu.Item key="1">综合排序</Menu.Item>
        <Menu.Item key="2">最新发布优先</Menu.Item>
        <Menu.Item key="3">浏览最多优先</Menu.Item>
        <Menu.Item key="4">点赞最多优先</Menu.Item>
      </Menu>
    );
    const menu2 = (
      <Menu onClick={handleMenuClick2}>
        <Menu.Item key="1">全部资讯</Menu.Item>
        <Menu.Item key="2">国内新闻</Menu.Item>
        <Menu.Item key="3">国际新闻</Menu.Item>
        <Menu.Item key="4">政策法规</Menu.Item>
        <Menu.Item key="5">政策法规</Menu.Item>
      </Menu>
    );
    function handleMenuClick(e) {
      message.info('Click on menu item.');
      console.log('click', e);
    }
    function handleMenuClick2(e) {
      message.info('Click on menu item.');
      console.log('click', e);
    }
    const { location } = this.props;
    const { query } = location;
    const { newList } = this.state;
    return (
      <React.Fragment>
        <React.Fragment>
          <LogoHeader moduleName='资讯中心'
            rightContent={
              <Input.Search
                placeholder="请输入关键词"
                enterButton=" 搜 索 "
                size="large"
                onSearch={this.onSearch}
                className={styles.SearchBox}
              />
            }
            extra={extra}/>
          <div className={styles.line}></div>
        </React.Fragment>
        {query && query.key && query.key === 'null' ? (
          <div className={styles.no_list}>
            <p className={styles.title}>非常抱歉，没有符合条件的搜索结果！</p>
            <Link className={styles.back} to="/notice">
                返回上一页&gt;&gt;
            </Link>
          </div>
        ) : (
          <React.Fragment>
            <React.Fragment>
              <div className={styles.tabBob}>
                <div className={styles.leftTabBox + ' ' + styles.pullLeft}>
                  <span>{query && query.key ? `"${query.key}"` : ' '}</span>
                  <span className={styles.s2}>相关的文章资讯</span>
                  <Link to='/'>&lt;返回上一页</Link>
                </div>
                <div className={styles.rightTabBox + ' ' + styles.pullRight}>
                  <Dropdown overlay={menu}>
                    <Button style={{ marginLeft: 8 }}>
                  最新发布优先<Icon type="down" />
                    </Button>
                  </Dropdown>
                  <Dropdown overlay={menu2}>
                    <Button style={{ marginLeft: 8 }}>
                  最新发布优先<Icon type="down" />
                    </Button>
                  </Dropdown>
                </div>
              </div>
            </React.Fragment>
            <React.Fragment>
              {
                newList.map((item, index) => {
                  return (
                    <div className={`${styles.content} ${styles.clearfix}`} key={item.key}>
                      <div className={styles.leftContent + ' ' + styles.pullLeft} style={{ display: item.newsPic === '' ? 'none' : 'block' }}>
                        <Link to='/'><img src={item.newsPic} alt=""/></Link>
                      </div>
                      <div className={styles.rightContent}>
                        <div className={styles.headerTitle}><Link to='/'>[{item.sort}]{item.title}</Link> </div>
                        <div className={styles.contentTitle}><Link to='/'>{item.content}</Link></div>
                        <div className={`${styles.footerText}`}>
                          <div className={styles.pullLeft}>
                            <span className={styles.s1}>{item.website}</span>
                            <span className={styles.s2}>|</span>
                            <span className={styles.s3}>{item.date}</span>
                          </div>
                          <div className={styles.pullRight}>
                            <i className={`iconfont icon-chakan ${styles.chakanIcon}`}></i>
                            <span className={styles.s4}> {item.see}</span>
                            <i className={`iconfont icon-dianzan ${styles.chakanIcon}`}></i>
                            <span className={styles.s5}> {item.zan}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })
              }
              <div className={styles.loader}>
                <Pagination
                  className={styles.pagination}
                  showQuickJumper
                  showSizeChanger
                  onShowSizeChange={this.onShowSizeChange}
                  defaultCurrent={2}
                  total={500}
                  pageSize={10}
                  showTotal={(total, range) =>
                    `当前页 ${range[1] - range[1]}条记录，共${total}条`
                  }
                  onChange={this.onChange}
                />
              </div>
            </React.Fragment>
          </React.Fragment>
        )}
      </React.Fragment>
    );
  }
}
